<template>
  <div class="category">
    <div class="search-box">
      <div class="search-content" @click="gotosearch()">
        <icon class="iconfont icon-sousuo1"></icon>
        <block>搜索商品</block>
      </div>
    </div>
    <!-- 左侧分类 -->
    <div class="rootlists" style="float:left;">
      <div class="ul rootList rootList_no">
        <div @click="tabsa(index)" class="li tem_2" :class="active == index ? 'active' : ''" v-for="(item, index) in categoryList" :key="index">
          <div class="span">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 右侧分类 -->
    <div class="category-content" style="float:right;">
      <!-- <div class="container" @scroll="handleScroll">
        <div class="content">
          <div v-for="item in items" :key="item.id">
            {{ item.content }}
          </div>
        </div>
        <div v-if="isBottomReached" class="bottom-reached-tip">
          你已经触底了！
        </div>
      </div> -->

      <block>
        <div class="carcontent2" @scroll="handleScroll">
          <div class="catagoryBox" :class="flxShow ? 'topnavFixed ' : ''">
            <van-collapse v-model="activeNames">
              <van-collapse-item title="选择分类" name="1">
                <div style="max-height: 32vh;overflow-y: auto;">
                  <div class="dl">
                    <div @click="chooseSecondary(Secondary.id)" :class="Secondary.id == secondaryId ? 'addClass1 dt' : 'removeClass1 dt'" v-for="(Secondary, index) in recommend" :key="index">
                      {{ Secondary.name }}
                    </div>
                    <div @click="getMoreData02" class="more-btn-class" v-if="isCategoryMore">查看更多<icon class="iconfont icon-member-bottom"></icon></div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>

            <!-- <van-collapse value="{{ activeNames }}" bind:change="onChange" bind:open="onOpen" bind:close="onClose">
              <van-collapse-item title="" name="1">
                <div style="max-height: 32vh;overflow-y: auto;">
                  <div class="dl">
                    <div
                      catchtap="chooseSecondary"
                      class="{{Secondary.id==secondaryId?'addClass1 dt':'removeClass1 dt'}}"
                      data-item="{{Secondary}}"
                      wx:for="{{recommend}}"
                      wx:for-item="Secondary"
                      wx:key="index"
                    >
                      {{ Secondary.name }}
                    </div>
                    <div catchtap="getMoreData02" class="more-btn-class" v-if="isCategoryMore">查看更多<icon class="iconfont icon-member-bottom"></icon></div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse> -->
          </div>

          <div class="goodsList" :class="category_template == '04' ? (category_template == '05' ? 'category_template01' : 'category_template04') : 'category_template01'" style="padding: 10px;">
            <div class="coverLayer" v-if="activeName == '1'"></div>
            <div>
              <div class="goodWrapper" v-if="foodInfo != ''">
                <div class="list ul" v-for="(good, index) in foodInfo" :key="index">
                  <div class="img">
                    <img @click="gotoGoods()" :src="good.thumb" style="width:100%;height:100%;" alt="" srcset="" />
                    <!-- <yz-image catchtap="gotoGoods" data-good="{{good}}" data-id="{{good.goods_id}}" src="{{good.thumb}}"></yz-image> -->
                  </div>
                  <div class="goods-info li">
                    <div class="info-class ul" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                      <div @click="gotoGoods(good, good.goods_id)" class="li" :class="category_template == '05' ? 'info_a_five' : 'info_a'" style="-webkit-box-orient: vertical;">
                        <div class="goods-title">{{ good.title }}</div>
                        <div class="fubu-title">发布人：{{ good.nickname }}</div>
                      </div>
                      <div class="info_c li info_c_five">
                        <div>
                          <div>
                            <div @click="gotoGoods(good, good.goods_id)" class="price span"><text class="small">牛证</text>{{ good.price }}</div>
                          </div>

                          <div class="pass_price" v-if="good.pass_price">{{ good.pass_price.name }}:{{ good.pass_price.price }}</div>
                        </div>
                        <div>
                          <div class="select leaseBox_five">
                            <div @click="immidateleyBuy(good, good.id, good.stock)" class="p">
                              <div class="right-buy">
                                立即购买
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="space" v-if="isBottomReached">{{ LoadMoreTest }}</div> -->
                <!-- <div v-if="isBottomReached" class="bottom-reached-tip">
                  你已经触底了！
                </div> -->
              </div>
              <div style="text-align:center;margin-top:8px;" v-if="!foodInfo">
                <image alt="" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/no-more-product.png" style="width: 150rpx;height:150rpx;"></image>
              </div>
            </div>
          </div>
        </div>
      </block>
    </div>

    <!-- 左侧分类 -->
    <!-- <scroll-view bindscrolltolower="getMoreCategoryNew" class="rootlists" scrollY="{{true}}" style="float:left;"> -->
    <!-- <div class="ul rootList rootList_no" v-if="categoryList">
        <div @click="tabsa(index,item)" class="li tem_2" :class="active==index?'active':''"  v-if="item.name" v-for="(item,index) in categoryList" :key="index">
          <div class="span">{{ item.name }}</div>
        </div>
      </div> -->
    <!-- </scroll-view> -->
    <!-- 右侧分类 -->

    <!-- <scroll-view
      scrollY
      bindscroll="changeScroll"
      bindscrolltolower="bindscrolltolower"
      bindscrolltoupper="upper"
      class="category-content"
      lowerThreshold="50"
      scrollTop="{{scrollTop}}"
      style="float:right;"
      throttle="{{false}}"
      upperThreshold="0"
    > -->
    <!-- <block>
        <div class="carcontent2">
          <div class="catagoryBox" :class="flxShow?'topnavFixed ':''">
            <van-collapse value="{{ activeNames }}" bind:change="onChange" bind:open="onOpen" bind:close="onClose">
              <van-collapse-item title="" name="1">
                <div style="max-height: 32vh;overflow-y: auto;">
                  <div class="dl">
                    <div
                      catchtap="chooseSecondary"
                      class="{{Secondary.id==secondaryId?'addClass1 dt':'removeClass1 dt'}}"
                      data-item="{{Secondary}}"
                      wx:for="{{recommend}}"
                      wx:for-item="Secondary"
                      wx:key="index"
                    >
                      {{ Secondary.name }}
                    </div>
                    <div catchtap="getMoreData02" class="more-btn-class" v-if="isCategoryMore">查看更多<icon class="iconfont icon-member-bottom"></icon> </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>

          <div class="goodsList" :class="category_template=='04'?category_template=='05'?'category_template01':'category_template04':'category_template01'" style="padding: 20rpx;">
            <div class="coverLayer" v-if="activeName=='1'"></div>
            <div>
              <div class="goodWrapper" v-if="foodInfo">
                <div class="list ul" v-for="(good,index) in foodInfo" :key="index">
                  <div class="img">
                    <yz-image catchtap="gotoGoods" data-good="{{good}}" data-id="{{good.goods_id}}" src="{{good.thumb}}"></yz-image>
                  </div>
                  <div class="goods-info li">
                    <div class="info-class ul" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                      <div @click="gotoGoods(good,good.goods_id)" class="li" :class="category_template=='05'?'info_a_five':'info_a'" style="-webkit-box-orient: vertical;">
                        <div class="goods-title">{{ good.title }}</div>
                        <div class="fubu-title">发布人：{{ good.nickname }}</div>
                      </div>
                      <div class="info_c li info_c_five">
                        <div>
                          <div>
                            <div @click="gotoGoods(good,good.goods_id)" class="price span"> <text class="small">牛证</text>{{ good.price }} </div>
                          </div>

                          <div class="pass_price" v-if="good.pass_price">{{ good.pass_price.name }}:{{ good.pass_price.price }} </div>
                        </div>
                        <div>
                          <div class="select leaseBox_five">
                            <div @click="immidateleyBuy(good,good.id,good.stock)" class="p" >
                              <div class="right-buy">
                                立即购买
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="space">{{ LoadMoreTest }}</div>
              </div>
              <div style="text-align:center;margin-top:16rpx;" v-if="!foodInfo">
                <image alt="" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/no-more-product.png" style="width: 150rpx;height:150rpx;"></image>
              </div>
            </div>
          </div>
        </div>
      </block> -->
    <!-- </scroll-view> -->
  </div>
</template>
<script>
import storeCategoryList_controller from "./storeCategoryList_controller";

export default storeCategoryList_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.f-10 {
  font-size: 0.625rem;
}

.f-14 {
  font-size: 0.875rem;
}

.c-bbb {
  color: #bbb;
}

.flex-c {
  align-items: center;
  display: flex;
  justify-content: center;
}

.mt-15 {
  margin-top: 1.125rem;
}

.clamp-2 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category {
  background: #fff;
  height: 100vh;
}

.pass_price {
  color: #867e7e;
}

.cate-box {
  display: flex;
}

// .category .m_header {
//   background: #fff;
//   box-sizing: border-box;
//   font-size: 36rpx;
//   height: 90rpx;
//   line-height: 90rpx;
//   padding-right: 30rpx;
//   width: 100%;
// }

// .category .m_header .span {
//   display: inline-block;
//   font-size: 60rpx;
//   height: 48rpx;
//   margin-left: 20rpx;
//   width: 32rpx;
// }

// .category .m_header icon {
//   float: right;
//   font-size: 32rpx;
//   font-style: normal;
// }

.category .rootlists {
  background: #fff;
  height: 90vh;
  width: 24%;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  color: transparent;
  height: 0;
  width: 0;
}

.category .search-box {
  background: #fff;
  padding: 6px 16px;
}

.category .search-box .search-content {
  align-items: center;
  background: #f5f5f5;
  border-radius: 14px;
  color: #8c8c8c;
  display: flex;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.category .category-content {
  -webkit-overflow-scrolling: touch;
  background: #fff;
  height: 90vh;
  white-space: nowrap;
  width: 76%;
}

.category .category-content .err {
  font-size: 28rpx;
  padding-top: 80rpx;
  text-align: center;
}

.category .category-content .carcontent {
  word-wrap: break-word;
}

.category .bottom {
  background: #fff;
  border-top: 2rpx solid #eaeaea;
  bottom: 0;
  box-sizing: border-box;
  font-size: 36rpx;
  line-height: 80rpx;
  padding: 30rpx;
  position: fixed;
  text-align: left;
  width: 100%;
}

.category .catagoryBox .van-cell__title {
  overflow: hidden;
}

.category .catagoryBox .van-cell {
  background-color: #fff;
  box-sizing: border-box;
  color: #323233;
  display: flex;
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  padding: 10rpx 15px;
  position: relative;
  width: 100%;
}

.category .catagoryBox .activetitle .dl {
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: auto;
  width: 100%;
}

.category .catagoryBox .activetitle .dl .dt {
  flex-shrink: 0;
  margin-bottom: 0;
}

.category .bottom .b {
  color: #f37385;
}

.category .bottom .a {
  color: #000;
}

.category .bottom .span {
  background: #f15353;
  color: #fff;
  display: inline-block;
  height: 80rpx;
  text-align: center;
  width: 260rpx;
}

.category .bottom .span .a {
  color: #fff;
  font-size: 32rpx;
}

.rootList {
  background: #f7f7f7;
  font-size: 12px;
  width: 100%;
}

.rootList_no {
  // background: #fff;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  padding-bottom: 45px;
  padding-top: 5px !important;
  width: 94% !important;
}

.rootList .li {
  color: #666;
  font-size: 14px;
  padding: 12px 0px;
  text-align: left;
}

.rootList .li .span {
  border-left: 2px solid #f7f7f7;
  box-sizing: border-box;
  line-height: 16px;
  padding: 0 10px;
  width: 100%;
}

.rootList .active.li {
  background: rgba(241, 83, 83, 0.1);
  border-radius: 0 5px 5px 0;
  color: #f15353;
}

.rootList .active .span {
  border-left: 2px solid red;
  font-weight: 700;
}

.rootList .li .tem_2 {
  // background: #fff;
}

.rootList .active.tem_2 {
  // background: #eee;
  color: #f15353;
}

rootlist .li_no {
  align-items: center;
  color: #999;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  justify-content: center;
  min-height: 88rpx;
  padding: 0;
  text-align: center;
}

.carcontent2 {
  color: #686868;
  height: 100%;
  margin-top: 3%;
  overflow-y: scroll;
}

.carcontent2 .branch {
  margin: 0 3%;
}

.carcontent2 .branch .a image {
  border-radius: 16rpx;
  overflow: hidden;
}

.branch_no {
  height: 240rpx;
  padding: 20rpx 20rpx 20rpx 30rpx;
}

.branch_no .branchSwiper {
  height: 240rpx;
  width: 100%;
}

.branch_no .branchSwiper .branch_img {
  background: #7fffd4;
  height: 100%;
  width: 100%;
}

.branch_no .branchSwiper .branch_img image {
  height: 100%;
  width: 100%;
}

.carcontent2 .catagoryBox {
  /* height: 152rpx;
  position: relative; */
  z-index: 100;
}

.category .topnavFixed .van-cell__title {
  overflow: hidden;
}

.carcontent2 .topnavFixed {
  background: #fff;
  height: 76px;
  // position: fixed;
  // top: 50px;
  white-space: nowrap;
  width: 76%;
  // z-index: 100;
}

.carcontent2 .catagoryBox .threeTitle {
  color: #202020;
  height: 80rpx;
  line-height: 80rpx;
  text-align: left;
}

.carcontent2 .catagoryBox .dl {
  display: flex;
  flex-wrap: wrap;
}

.carcontent2 .catagoryBox .dl .dt {
  background-color: #f8f8f6;
  border-radius: 14px;
  font-size: 11px;
  height: 28px;
  line-height: 28px;
  margin-bottom: 10px;
  margin-right: 5px;
  min-width: 50px;
  padding: 0 6px;
  text-align: center;
}

.carcontent2 .catagoryBox .dl .three-btn {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  padding: 0 12px;
}

.carcontent2 .catagoryBox .dl .three-addClass {
  border: 1px solid #f15353;
  color: #f15353;
}

.carcontent2 .catagoryBox .dl .dt05 {
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 8px 10px 8px 11px;
}

.carcontent2 .catagoryBox .dl .dt_no {
  background-color: #fcf6f5;
}

.carcontent2 .catagoryBox .dl .dt_no,
.carcontent2 .catagoryBox .dl .dt_no_c {
  border-radius: 6rpx;
  flex-shrink: 0;
  font-size: 24rpx;
  height: 66rpx;
  line-height: 66rpx;
  margin-bottom: 0;
  margin-right: 20rpx;
  padding: 0 16rpx;
}

.carcontent2 .catagoryBox .dl .dt_no_c {
  background-color: #f9f9f9;
}

.carcontent2 .catagoryBox .dl .addClass {
  background-color: rgba(241, 83, 83, 0.1);
  color: #f15353;
}

.carcontent2 .catagoryBox .dl .addClass_no {
  color: #f15353;
}

.carcontent2 .catagoryBox .dl .addClass1 {
  background: #fb5050;
  border: none;
  border-radius: 28rpx;
  color: #fff;
}

.carcontent2 .catagoryBox .dl .addClass5 {
  background: #fcf6f5;
  border: none;
  border-radius: 28rpx;
  color: #c03b38;
}

.carcontent2 .catagoryBox .dl .removeClass1 {
  border: none;
}

.carcontent2 .catagoryBox .dl .more-btn-class {
  background: transparent;
  border: none;
  color: #fb5050;
  display: flex;
  height: 36rpx;
  line-height: 36rpx;
}

.carcontent2 .catagoryBox .dl .more-btn-class icon {
  display: flex;
}

.carcontent2 .goodsList {
  background: #fff;
  overflow-y: scroll;
  /* position: relative; */
}

.carcontent2 .goodsList .coverLayer {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.carcontent2 .goodsList .goodWrapper {
  height: 100%;
}

.carcontent2 .goodsList .goodWrapper::after {
  background: transparent;
  content: " ";
  display: block;
  height: 58px;
  width: 100%;
}

.carcontent2 .goodsList .space {
  height: 58px;
  line-height: 58px;
  text-align: center;
  width: 100%;
}

.carcontent2 .goodsList .list {
  display: flex;
  padding: 0 0 16px;
}

.carcontent2 .goodsList .list .img {
  border-radius: 6px;
  height: 80px;
  margin-right: 8px;
  overflow: hidden;
  width: 80px;
}

.carcontent2 .goodsList .list .img image {
  border-radius: 6px;
  height: 100%;
  width: 100%;
}

.carcontent2 .goodsList .list .goods-info {
  flex: 1;
  text-align: left;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_a {
  margin-bottom: 4px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_a .goods-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #333;
  display: -webkit-box;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  white-space: normal;
}
.carcontent2 .goodsList .list .goods-info .info-class .info_a .fubu-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgb(105, 105, 105);
  display: -webkit-box;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
  white-space: normal;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_a .goods-label-box {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #888;
  display: -webkit-box;
  font-size: 12px;
  line-height: 16px;
  max-height: 33px;
  max-width: 180px;
  overflow: hidden;
  white-space: normal;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_a .goods-label-box .goods-label {
  margin-right: 6px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_a_five {
  color: #000;
  font-size: 12px;
  height: 32px;
  line-height: 16px;
  margin-bottom: 4px;
  max-width: 153px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_b {
  color: #999;
  font-size: 10px;
  height: 15px;
  line-height: 15px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c {
  display: flex;
  justify-content: space-between;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .price {
  color: #f15353;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .price .small {
  font-size: 10px;
  font-weight: 400;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c_five .price text {
  color: #c23b38;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .standard button {
  background-color: #f15353;
  border: none;
  border-radius: 12px;
  color: #fff;
  height: 20px;
  width: 40px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select {
  display: flex;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select .span {
  border: none;
  display: inline-block;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  outline: none;
  text-align: center;
  width: 20px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select input {
  border: none;
  display: inline-block;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  outline: none;
  text-align: center;
  width: 20px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select .icon-life-game-plus,
.icon-gouwuche2 {
  background-color: #f15353;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select icon {
  align-items: center;
  border-radius: 12px;
  color: #fff;
  display: flex;
  font-size: 14px;
  height: 20px;
  justify-content: center;
  line-height: 20px;
  text-align: center;
  width: 20px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .select .icon-life-game-sign {
  background-color: #ccc;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .leaseBox {
  background: #f15353;
  border-radius: 16px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .leaseBox_five {
  background-color: #fff;
  border-radius: 16px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  padding: 0;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .leaseBox_five image {
  height: 28px;
  width: 28px;
}

.leaseBox_five_no {
  background-color: #fff;
  border-radius: 32rpx;
  color: #fff;
  font-size: 12px;
  line-height: 40rpx;
  padding: 0;
}

.leaseBox_five_no image {
  height: 56rpx;
  width: 56rpx;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .optionClass {
  position: relative;
  z-index: 0;
}

.carcontent2 .goodsList .list .goods-info .info-class .info_c .optionClass .cart-num {
  background: #fc3;
  border: 1px solid #fff;
  color: #2c2c2c;
  font-size: 10px;
  height: 26rpx;
  line-height: 26rpx;
  min-width: 26rpx;
  position: absolute;
  right: -5px;
  top: -8px;
  width: auto;
}

.category .spec_box {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  width: 540rpx;
}

.category .spec_box .good-spec-popup {
  align-items: flex-start;
}

.category .spec_box .good-spec-popup image {
  background: #ededed;
  border-radius: 2px;
  height: 90rpx;
  margin-right: 6px;
  width: 90rpx;
}

.category .spec_box .good-spec-popup .title {
  flex: 1;
  font-size: 13px;
  line-height: 36rpx;
  text-align: left;
}

.category .spec_box .spec_a {
  height: 384rpx;
  overflow-y: scroll;
}

.category .spec_box .spec_a .h5 {
  display: block;
  line-height: 72rpx;
  text-align: left;
}

.category .spec_box .spec_a .option {
  display: flex;
  flex-wrap: wrap;
}

.category .spec_box .spec_a .option .cur {
  background: #faf0f0 !important;
  border: 2rpx solid #f15353 !important;
}

.category .spec_box .spec_a .option .li {
  background: #f5f5f5;
  border: 2rpx solid #ebebeb;
  border-radius: 6rpx;
  line-height: 60rpx;
  margin-bottom: 20rpx;
  margin-right: 20rpx;
  min-height: 60rpx;
  padding: 0 6px;
}

.category .add_car {
  border-top: 1rpx solid #ebebeb;
  height: 110rpx;
  line-height: 110rpx;
  width: 100%;
}

.category .add_car .car_btn {
  height: 100%;
  justify-content: space-between;
  padding: 0 28rpx;
}

.category .add_car .car_btn,
.category .add_car .car_btn .left {
  align-items: center;
  display: flex;
}

.category .add_car .car_btn .left {
  color: #f15353;
  flex: 1;
  flex-direction: column;
  font-size: 32rpx;
  text-align: left;
}

.category .add_car .car_btn .left .good-price {
  line-height: 36rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.category .add_car .car_btn .left .vip-price {
  color: #fdbc2e;
  font-size: 11px;
  line-height: 38rpx;
  width: 100%;
}

.category .add_car .car_btn .left .span {
  font-size: 24rpx;
}

.category .add_car .car_btn .right .span {
  background: #f15353;
  border-radius: 32rpx;
  color: #fff;
  display: block;
  font-size: 14px;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  width: 178rpx;
}

.category .add_car .car_btn .Box {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 20rpx;
}

.category .add_car .car_btn .Box icon {
  color: #f15353;
  font-size: 26px;
  height: 56rpx;
  line-height: 56rpx;
  width: 28px;
}

.category .add_car .car_btn .Box .icon-store_reduceLine {
  color: #aaa;
}

.category .add_car .car_btn .Box label {
  background-color: initial;
  background-origin: content-box;
  color: #333;
  display: inline-block;
  font-size: 12px;
  height: 56rpx;
  line-height: 56rpx;
  overflow: hidden;
  padding: 0;
  right: 70rpx;
  text-align: center;
  vertical-align: top;
  width: 48rpx;
}

.carcontent2 .category_template04 {
  background: #f4f4f4;
}

.carcontent2 .category_template04 .goodWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.carcontent2 .category_template04 .goodWrapper .list {
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  overflow: hidden;
  padding: 0;
  width: 49%;
}

.carcontent2 .category_template04 .list .img {
  border-radius: 0;
  height: 0;
  margin: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.carcontent2 .category_template04 .list .img image {
  border-radius: 0;
  height: 100%;
  position: absolute;
  right: 0;
  width: 100%;
}

.carcontent2 .category_template04 .list .goods-info {
  padding: 4px;
}

.carcontent2 .category_template04 .list .goods-info .info-class .info_c .price {
  flex: 1;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carcontent2 .category_template04 .list .goods-info .info-class .info_c .leaseBox {
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
}

.dodL {
  box-sizing: border-box;
  font-size: 28rpx;
  height: 90rpx;
  line-height: 90rpx;
  overflow: hidden;
  padding: 0 28rpx;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.indAct {
  position: relative;
}

.indAct::before {
  background: #ad0d10;
  border-radius: 10rpx;
  bottom: 0;
  content: "";
  height: 30rpx;
  left: 14rpx;
  position: absolute;
  top: 30rpx;
  width: 6rpx;
}

.name_no {
  font-size: 32rpx;
  font-weight: 700;
}

.name_no_ae {
  font-size: 28rpx;
  font-weight: 400;
}

.addClass_no {
  color: #c23b38;
}

.van-collapse-item .van-collapse-item__content {
  padding: 13px 10px;
}

.category .template_four_goods_category {
  margin-bottom: 10rpx;
  margin-right: 20rpx;
  padding: 20rpx;
  position: relative;
}

.category .template_four_goods_category .template_four_goods_category_line {
  background-color: #f15353;
  border-radius: 200rpx;
  bottom: 0;
  height: 6rpx;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 50%;
}

.category .tiktpk-active {
  color: #f15353;
  font-size: 30rpx !important;
}

.category .fz24 {
  font-size: 24rpx;
}

.right-buy {
  /* color: #fff; */
  /* width: 100rpx; */
  /* height: 60rpx; */
  border-radius: 20px;
  /* background: red; */
  line-height: 25px;
  padding: 1px 10px;
  border: solid 1px #ff2c29;
  color: #ff2c29;
}

.container {
  height: 300px; /* 设置容器高度 */
  overflow-y: scroll; /* 启用垂直滚动 */
  position: relative; /* 为了定位提示信息 */
}

.content {
  padding: 10px;
}

.bottom-reached-tip {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #f0f0f0;
  padding: 10px;
}
</style>
